<template>
  <div>{{ cat }}
      <button @click="chageCat">chat</button></div>
      
   
</template>

<script lang="ts">
 import { defineComponent } from 'vue'
  export default  defineComponent({
    name:'App'
  })
</script>
<script lang="ts" setup>
  import {reactive,ref,toRefs} from 'vue'

  const cat=ref({
    name:"xiaomimi",
    age:5
  })

  const chageCat=()=>{
    cat.value={name:"damimi",age:3}
  }
  //在解构代理对象的时候希望可以使用toRefs方法包裹住代理对象解构
  //解构出来的值就是ref对象，具有响应式，在逻辑中使用要添加.value
  const { name,age}=toRefs(cat.value)
  console.log(name,age);
  
  
</script>

<style lang="less" scoped>
  
</style>